<template>
    <div class="header">
        <h3>叩丁狼电商运营平台</h3>
        <el-icon color="#fff" size="20" @click="asideStore.setIsCollapse(!asideStore.isCollapse)">
            <Menu />
        </el-icon>
        <el-dropdown class="el-dropdown" @command="handleCommand">
            <span class="el-dropdown-link">
                {{ userStore.username }}
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="index">首页</el-dropdown-item>
                    <el-dropdown-item command="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup lang="ts">
import { Menu, ArrowDown } from "@element-plus/icons-vue";
import { useAsideStore } from "@/store/aside"
import { useUserStore } from "@/store/user"
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { logout } from "@/common/logout"
import { LogoutAPI } from "@/request/api/userInfo"

const asideStore = useAsideStore();
const userStore = useUserStore();
const router = useRouter();

const handleCommand = (command: string) => {
    if (command === "index") {
        // 跳转至index
        router.push("/index")
    } else if (command === "logout") {
        // 退出登录
        logout(
            () => {
                // 登出请求
                LogoutAPI();
                console.log("logout");

            }, () => {
                // 提示
                ElMessage.success("退出成功")
            })



    }
}


</script>

<style scoped lang="less">
.header {
    h3 {
        display: inline-block;
        line-height: 70px;
        font-weight: 400;
        font-size: 24px;
        color: #fff;
        margin-right: 20px;
    }

    .el-dropdown {
        float: right;

        .el-dropdown-link {
            cursor: pointer;
            color: #fff;
            display: flex;
            margin-top: 27px;
            align-items: center;
        }


    }

}
</style>